<template>
  <div class="user-management">
    <!-- 页面头部 -->
    <div class="page-header">
      <div class="header-left">
        <div class="title-group">
          <h1 class="page-title">
            <el-icon class="title-icon"><User /></el-icon>
            用户管理
          </h1>
          <p class="page-description">管理系统中的所有用户账户和权限</p>
        </div>
      </div>
      <div class="header-right">
        <div class="stats-container">
          <el-tooltip content="系统中注册的用户总数" placement="bottom">
            <div class="stat-item">
              <div class="stat-icon total-users">
                <el-icon><User /></el-icon>
              </div>
              <div class="stat-content">
                <div class="stat-value">{{ totalUsers || 0 }}</div>
                <div class="stat-label">总用户</div>
              </div>
            </div>
          </el-tooltip>
          <el-tooltip content="具有管理员权限的用户数量" placement="bottom">
            <div class="stat-item">
              <div class="stat-icon admin-users">
                <el-icon><Star /></el-icon>
              </div>
              <div class="stat-content">
                <div class="stat-value">{{ adminUsers || 0 }}</div>
                <div class="stat-label">管理员</div>
              </div>
            </div>
          </el-tooltip>
        </div>
      </div>
    </div>
    
    <!-- 搜索和操作区 -->
    <el-card class="search-card" shadow="never">
      <el-row :gutter="16" justify="space-between" align="middle">
        <el-col :span="16">
          <el-row :gutter="12">
            <el-col :span="10">
              <el-input
                v-model="searchQuery"
                placeholder="搜索用户名或邮箱..."
                prefix-icon="Search"
                @input="handleSearch"
                class="search-input"
                clearable
              />
            </el-col>
            <el-col :span="6">
              <el-select 
                v-model="roleFilter" 
                @change="applyFilters" 
                placeholder="筛选角色" 
                clearable
                class="filter-select"
              >
                <el-option label="全部角色" value="" />
                <el-option label="管理员" value="admin" />
                <el-option label="普通用户" value="user" />
              </el-select>
            </el-col>
            <el-col :span="8">
              <el-button-group>
                <el-button @click="handleSearch" type="primary" plain>
                  <el-icon><Search /></el-icon>
                  搜索
                </el-button>
                <el-button @click="refreshUsers" plain>
                  <el-icon><Refresh /></el-icon>
                  刷新
                </el-button>
              </el-button-group>
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="8">
          <div class="action-buttons">
            <el-button type="primary" size="default" @click="showAddUserModal = true">
              <el-icon><Plus /></el-icon>
              添加用户
            </el-button>
          </div>
        </el-col>
      </el-row>
    </el-card>

    <!-- 用户列表 -->
    <el-card class="table-card" shadow="never">
      <template #header>
        <div class="card-header">
          <span class="card-title">用户列表</span>
          <el-tag v-if="selectedUsers.length > 0" type="info" size="large" round>
            已选择 {{ selectedUsers.length }} 个用户
          </el-tag>
        </div>
      </template>
      
      <el-table 
        :data="users" 
        v-loading="loading"
        @selection-change="handleSelectionChange"
        class="user-table"
        stripe
        empty-text="暂无用户数据"
      >
        <el-table-column type="selection" width="50" />
        
        <el-table-column label="用户信息" min-width="200">
          <template #default="{ row }">
            <div class="user-info">
              <el-avatar 
                :size="40" 
                :src="processAvatarUrl(row.avatar)" 
                class="user-avatar"
              >
                <el-icon><User /></el-icon>
              </el-avatar>
              <div class="user-details">
                <div class="username">{{ row.username }}</div>
                <div class="user-id">ID: {{ row.id.substring(0, 8) }}...</div>
              </div>
            </div>
          </template>
        </el-table-column>
        
        <el-table-column prop="email" label="邮箱" min-width="180">
          <template #default="{ row }">
            <div class="email-cell">
              <el-icon class="email-icon"><Message /></el-icon>
              {{ row.email || '未设置' }}
            </div>
          </template>
        </el-table-column>
        
        <el-table-column prop="phoneNumber" label="手机号" width="130">
          <template #default="{ row }">
            <div class="phone-cell">
              <el-icon class="phone-icon"><Phone /></el-icon>
              {{ row.phoneNumber || '未设置' }}
            </div>
          </template>
        </el-table-column>
        
        <el-table-column prop="role" label="角色" width="100">
          <template #default="{ row }">
            <el-tag 
              :type="getRoleType(row.role)" 
              size="default"
              round
              effect="dark"
            >
              <el-icon v-if="row.role === 'admin'"><Star /></el-icon>
              <el-icon v-else><User /></el-icon>
              {{ getRoleText(row.role) }}
            </el-tag>
          </template>
        </el-table-column>
        
        <el-table-column prop="createdAt" label="注册时间" width="160">
          <template #default="{ row }">
            <div class="time-cell">
              <el-icon class="time-icon"><Calendar /></el-icon>
              {{ formatTime(row.createdAt) }}
            </div>
          </template>
        </el-table-column>
        
        <el-table-column label="操作" width="150" fixed="right">
          <template #default="{ row }">
            <div class="action-buttons-cell">
              <el-button-group>
                <el-button size="small" @click="viewUser(row)" type="info" link>
                  <el-icon><View /></el-icon>
                </el-button>
                <el-button size="small" type="primary" @click="editUser(row)" link>
                  <el-icon><Edit /></el-icon>
                </el-button>
                <el-button size="small" type="danger" @click="deleteUser(row.id)" link>
                  <el-icon><Delete /></el-icon>
                </el-button>
              </el-button-group>
            </div>
          </template>
        </el-table-column>
      </el-table>

      <!-- 批量操作 -->
      <transition name="el-fade-in">
        <div v-if="selectedUsers.length > 0" class="batch-actions">
          <el-card class="batch-card" shadow="always">
            <el-row justify="space-between" align="middle">
              <el-col :span="12">
                <div class="batch-info">
                  <el-icon class="batch-icon"><Select /></el-icon>
                  <span>已选择 <strong>{{ selectedUsers.length }}</strong> 个用户</span>
                </div>
              </el-col>
              <el-col :span="12">
                <div class="batch-buttons">
                  <el-button-group>
                    <el-button type="danger" size="small" @click="batchDeleteUsers" plain>
                      <el-icon><Delete /></el-icon>
                      批量删除
                    </el-button>
                  </el-button-group>
                </div>
              </el-col>
            </el-row>
          </el-card>
        </div>
      </transition>

      <!-- 分页 -->
      <div class="pagination-wrapper">
        <el-pagination
          v-if="totalPages > 1"
          v-model:current-page="currentPage"
          :page-size="pageSize"
          :total="totalUsers"
          layout="total, sizes, prev, pager, next, jumper"
          @current-change="changePage"
          :page-sizes="[10, 20, 50, 100]"
          @size-change="handleSizeChange"
          background
        />
      </div>
    </el-card>

    <!-- 用户详情对话框 -->
    <el-dialog
      v-model="showUserModal"
      title="用户详情"
      width="700px"
      class="user-detail-dialog"
      @closed="closeUserModal"
    >
      <div v-if="selectedUser" class="user-detail-content">
        <!-- 用户头部信息 -->
        <div class="user-header">
          <el-avatar :size="80" :src="processAvatarUrl(selectedUser.avatar)" class="user-avatar-large">
            <el-icon><User /></el-icon>
          </el-avatar>
          <div class="user-main-info">
            <h3 class="user-name">{{ selectedUser.username }}</h3>
            <div class="user-tags">
              <el-tag 
                :type="getRoleType(selectedUser.role)" 
                size="large"
                round
                effect="dark"
              >
                <el-icon v-if="selectedUser.role === 'admin'"><Star /></el-icon>
                <el-icon v-else><User /></el-icon>
                {{ getRoleText(selectedUser.role) }}
              </el-tag>
            </div>
          </div>
        </div>

        <!-- 详细信息 -->
        <el-divider content-position="left">
          <el-icon><InfoFilled /></el-icon>
          基本信息
        </el-divider>
        
        <el-descriptions :column="2" border size="large">
          <el-descriptions-item>
            <template #label>
              <div class="desc-label">
                <el-icon><Key /></el-icon>
                用户ID
              </div>
            </template>
            <el-text class="user-id-text" type="info">{{ selectedUser.id }}</el-text>
          </el-descriptions-item>
          
          <el-descriptions-item>
            <template #label>
              <div class="desc-label">
                <el-icon><User /></el-icon>
                用户名
              </div>
            </template>
            {{ selectedUser.username }}
          </el-descriptions-item>
          
          <el-descriptions-item>
            <template #label>
              <div class="desc-label">
                <el-icon><Message /></el-icon>
                邮箱
              </div>
            </template>
            {{ selectedUser.email }}
          </el-descriptions-item>
          
          <el-descriptions-item>
            <template #label>
              <div class="desc-label">
                <el-icon><Phone /></el-icon>
                手机号
              </div>
            </template>
            {{ selectedUser.phoneNumber || '未设置' }}
          </el-descriptions-item>
          
          <el-descriptions-item>
            <template #label>
              <div class="desc-label">
                <el-icon><Calendar /></el-icon>
                注册时间
              </div>
            </template>
            {{ formatTime(selectedUser.createdAt) }}
          </el-descriptions-item>
        </el-descriptions>
      </div>
      
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="closeUserModal">关闭</el-button>
          <el-button type="primary" @click="editUser(selectedUser)">
            <el-icon><Edit /></el-icon>
            编辑用户
          </el-button>
        </div>
      </template>
    </el-dialog>

    <!-- 添加/编辑用户对话框 -->
    <el-dialog
      v-model="showAddUserModal"
      :title="editingUser ? '编辑用户' : '添加用户'"
      width="600px"
      class="user-form-dialog"
      @closed="closeAddUserModal"
    >
      <!-- 角色权限说明 -->
      <el-alert
        v-if="!editingUser"
        title="权限说明"
        type="info"
        :closable="false"
        style="margin-bottom: 20px;"
      >
        <template #default>
          <div style="display: flex; gap: 20px; margin-top: 8px;">
            <div style="flex: 1;">
              <div style="display: flex; align-items: center; gap: 6px; margin-bottom: 4px;">
                <el-icon style="color: #409eff;"><User /></el-icon>
                <strong>普通用户</strong>
              </div>
              <ul style="margin: 0; padding-left: 16px; font-size: 13px; color: #666;">
                <li>查看和使用RAG问答系统</li>
                <li>管理自己的文档和对话</li>
                <li>查看个人资料</li>
              </ul>
            </div>
            <div style="flex: 1;">
              <div style="display: flex; align-items: center; gap: 6px; margin-bottom: 4px;">
                <el-icon style="color: #f56c6c;"><Star /></el-icon>
                <strong>管理员</strong>
              </div>
              <ul style="margin: 0; padding-left: 16px; font-size: 13px; color: #666;">
                <li>拥有普通用户的所有权限</li>
                <li>管理所有用户账户</li>
                <li>查看系统统计和监控</li>
                <li>系统配置和维护</li>
              </ul>
            </div>
          </div>
        </template>
      </el-alert>
      <el-form 
        ref="userFormRef" 
        :model="userForm" 
        :rules="userFormRules" 
        label-width="90px"
        size="large"
        class="user-form"
      >
        <el-form-item label="用户名" prop="username">
          <el-input 
            v-model="userForm.username" 
            :disabled="editingUser"
            prefix-icon="User"
            placeholder="请输入用户名"
          />
        </el-form-item>
        
        <el-form-item label="邮箱" prop="email">
          <el-input 
            v-model="userForm.email"
            prefix-icon="Message"
            placeholder="请输入邮箱地址"
          />
        </el-form-item>
        
        <el-form-item label="手机号" prop="phoneNumber">
          <el-input 
            v-model="userForm.phoneNumber"
            prefix-icon="Phone"
            placeholder="请输入手机号（可选）"
          />
        </el-form-item>
        
        <el-form-item label="密码" prop="password" v-if="!editingUser">
          <el-input 
            v-model="userForm.password" 
            type="password" 
            show-password
            prefix-icon="Lock"
            placeholder="请输入登录密码"
          />
        </el-form-item>
        
        <el-form-item label="角色" prop="role">
          <el-select v-model="userForm.role" style="width: 100%;" placeholder="请选择用户角色">
            <el-option label="普通用户" value="user">
              <div style="display: flex; justify-content: space-between; align-items: center;">
                <span>普通用户</span>
                <div style="display: flex; align-items: center; gap: 4px; color: #409eff;">
                  <el-icon><User /></el-icon>
                  <span style="font-size: 12px;">基础权限</span>
                </div>
              </div>
            </el-option>
            <el-option label="管理员" value="admin">
              <div style="display: flex; justify-content: space-between; align-items: center;">
                <span>管理员</span>
                <div style="display: flex; align-items: center; gap: 4px; color: #f56c6c;">
                  <el-icon><Star /></el-icon>
                  <span style="font-size: 12px;">完整权限</span>
                </div>
              </div>
            </el-option>
          </el-select>
          <div style="margin-top: 8px; font-size: 12px; color: #909399;">
            <div v-if="userForm.role === 'admin'" style="color: #f56c6c;">
              <el-icon><Star /></el-icon>
              管理员可以管理所有用户和系统设置
            </div>
            <div v-else-if="userForm.role === 'user'" style="color: #409eff;">
              <el-icon><User /></el-icon>
              普通用户只能使用基本功能
            </div>
          </div>
        </el-form-item>


      </el-form>
      
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="closeAddUserModal" size="large">取消</el-button>
          <el-button 
            type="primary" 
            @click="saveUser" 
            :loading="savingUser"
            size="large"
          >
            <el-icon v-if="!savingUser">
              <Check v-if="editingUser" />
              <Plus v-else />
            </el-icon>
            {{ editingUser ? '保存更改' : '创建用户' }}
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, onMounted, computed } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { 
  Search, Plus, Refresh, User, UserFilled, Star, 
  Message, Phone, Calendar,
  View, Edit, Delete, Select, Key, InfoFilled
} from '@element-plus/icons-vue'
import { userApi } from '@/api'

// 头像URL处理函数 - 解决Gitee图床CORS问题
const processAvatarUrl = (url) => {
  if (!url) return url
  // 只要是http开头的都走代理，兼容gitee、oss等
  if (url.startsWith('http')) {
    return `https://images.weserv.nl/?url=${encodeURIComponent(url.replace(/^https?:\/\//, ''))}`
  }
  return url
}

const users = ref([])
const loading = ref(false)
const searchQuery = ref('')
const roleFilter = ref('')
const selectedUsers = ref([])
const showUserModal = ref(false)
const showAddUserModal = ref(false)
const selectedUser = ref(null)
const editingUser = ref(false)
const savingUser = ref(false)

// 计算管理员用户数
const adminUsers = computed(() => {
  return users.value.filter(user => user.role === 'admin').length
})

// 分页相关
const currentPage = ref(1)
const pageSize = ref(20)
const totalUsers = ref(0)

const totalPages = computed(() => Math.ceil(totalUsers.value / pageSize.value))

// 用户表单
const userForm = ref({
  username: '',
  email: '',
  phoneNumber: '',
  password: '',
  role: 'user'
})

const userFormRef = ref()

const userFormRules = {
  username: [
    { required: true, message: '请输入用户名', trigger: 'blur' },
    { min: 3, max: 50, message: '用户名长度必须在3-50个字符之间', trigger: 'blur' }
  ],
  email: [
    { required: true, message: '请输入邮箱', trigger: 'blur' },
    { type: 'email', message: '请输入有效的邮箱地址', trigger: ['blur', 'change'] }
  ],
  phoneNumber: [
    { 
      pattern: /^1[3-9]\d{9}$/, 
      message: '请输入有效的手机号', 
      trigger: 'blur' 
    }
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { min: 6, max: 100, message: '密码长度必须在6-100个字符之间', trigger: 'blur' }
  ],
  role: [
    { required: true, message: '请选择角色', trigger: 'change' }
  ]
}

// 处理选中变化
const handleSelectionChange = (selection) => {
  selectedUsers.value = selection.map(item => item.id)
}

// 获取用户列表
const fetchUsers = async () => {
  loading.value = true
  try {
    console.log('开始获取用户列表...', {
      page: currentPage.value,
      pageSize: pageSize.value,
      search: searchQuery.value,
      role: roleFilter.value
    })
    
    const result = await userApi.getAllUsers({
      page: currentPage.value,
      pageSize: pageSize.value,
      search: searchQuery.value,
      role: roleFilter.value
    })
    
    console.log('用户列表获取成功:', result)
    
    // 处理返回的数据结构
    if (result.data && Array.isArray(result.data)) {
      users.value = result.data
      totalUsers.value = result.total || result.data.length
    } else if (Array.isArray(result)) {
      users.value = result
      totalUsers.value = result.length
    } else {
      console.warn('意外的数据格式:', result)
      users.value = []
      totalUsers.value = 0
    }
    
  } catch (error) {
    console.error('获取用户列表失败:', error)
    
    if (error.status === 403) {
      ElMessage.error('权限不足：需要管理员权限才能查看用户列表')
    } else if (error.status === 401) {
      ElMessage.error('认证失败：请重新登录')
    } else {
      ElMessage.error(`获取用户列表失败: ${error.message || '未知错误'}`)
    }
    
    users.value = []
    totalUsers.value = 0
  } finally {
    loading.value = false
  }
}

// 搜索用户
const handleSearch = async () => {
  currentPage.value = 1
  await fetchUsers()
}

// 应用筛选
const applyFilters = async () => {
  currentPage.value = 1
  await fetchUsers()
}

// 查看用户详情
const viewUser = async (user) => {
  selectedUser.value = user
  showUserModal.value = true
}

// 编辑用户
const editUser = (user) => {
  editingUser.value = true
  userForm.value = {
    id: user.id,
    username: user.username,
    email: user.email,
    phoneNumber: user.phoneNumber || '',
    role: user.role
  }
  showAddUserModal.value = true
}



// 删除用户
// 删除用户
const deleteUser = async (userId) => {
  try {
    // 找到要删除的用户信息
    const user = users.value.find(u => u.id === userId)
    const username = user ? user.username : '用户'
    
    await ElMessageBox.confirm(`确定要删除用户 "${username}" 吗？此操作不可恢复！`, '删除确认', {
      confirmButtonText: '确定删除',
      cancelButtonText: '取消',
      type: 'warning',
      dangerouslyUseHTMLString: false
    })
    
    await userApi.deleteUser(userId)
    await fetchUsers()
    ElMessage.success(`用户 "${username}" 删除成功`)
  } catch (error) {
    if (error !== 'cancel') {
      console.error('删除用户失败:', error)
      const errorMsg = error.response?.data?.message || error.message || '删除用户失败'
      ElMessage.error(errorMsg)
    }
  }
}

// 批量删除用户
const batchDeleteUsers = async () => {
  try {
    await ElMessageBox.confirm(`确定要删除选中的 ${selectedUsers.value.length} 个用户吗？`, '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    })
    
    for (const userId of selectedUsers.value) {
      await userApi.deleteUser(userId)
    }
    selectedUsers.value = []
    await fetchUsers()
    ElMessage.success('批量删除成功')
  } catch (error) {
    if (error !== 'cancel') {
      console.error('批量删除失败:', error)
      ElMessage.error('批量删除失败')
    }
  }
}

// 批量切换状态
// 保存用户
const saveUser = async () => {
  try {
    const valid = await userFormRef.value.validate()
    if (!valid) return

    savingUser.value = true
    
    if (editingUser.value) {
      // 编辑用户 - 构建更新数据
      const updateData = {
        username: userForm.value.username,
        email: userForm.value.email,
        phoneNumber: userForm.value.phoneNumber || '',
        role: userForm.value.role
      }
      console.log('编辑用户ID:', userForm.value.id)
      console.log('编辑用户数据:', updateData)
      console.log('请求URL:', `/api/user/${userForm.value.id}`)
      await userApi.updateUser(userForm.value.id, updateData)
      ElMessage.success('用户更新成功')
    } else {
      // 创建新用户 - 构建创建数据
      const createData = {
        username: userForm.value.username,
        password: userForm.value.password,
        email: userForm.value.email,
        phoneNumber: userForm.value.phoneNumber || '',
        role: userForm.value.role
      }
      console.log('创建用户数据:', createData)
      const newUser = await userApi.createUser(createData)
      
      const roleText = createData.role === 'admin' ? '管理员' : '普通用户'
      ElMessage.success(`${roleText}账户创建成功！用户名：${createData.username}`)
    }
    
    closeAddUserModal()
    await fetchUsers()
  } catch (error) {
    console.error('保存用户失败:', error)
    
    // 更详细的错误处理
    if (error.response && error.response.data) {
      const errorMessage = error.response.data.message || error.response.data || '保存用户失败'
      ElMessage.error(`保存用户失败: ${errorMessage}`)
    } else {
      ElMessage.error(`保存用户失败: ${error.message || '未知错误'}`)
    }
  } finally {
    savingUser.value = false
  }
}

// 关闭用户详情对话框
const closeUserModal = () => {
  showUserModal.value = false
  selectedUser.value = null
}

// 关闭添加用户对话框
const closeAddUserModal = () => {
  showAddUserModal.value = false
  editingUser.value = false
  userFormRef.value?.resetFields()
  userForm.value = {
    username: '',
    email: '',
    phoneNumber: '',
    password: '',
    role: 'user'
  }
}

// 刷新用户列表
const refreshUsers = () => {
  searchQuery.value = ''
  roleFilter.value = ''
  selectedUsers.value = []
  currentPage.value = 1
  fetchUsers()
}

// 换页
const changePage = (page) => {
  currentPage.value = page
  fetchUsers()
}

// 改变页面大小
const handleSizeChange = (size) => {
  pageSize.value = size
  currentPage.value = 1
  fetchUsers()
}

// 工具函数
const getRoleType = (role) => {
  const typeMap = {
    admin: 'danger',
    user: 'primary'
  }
  return typeMap[role] || 'info'
}

const getRoleText = (role) => {
  const roleMap = {
    admin: '管理员',
    user: '普通用户'
  }
  return roleMap[role] || role
}

const formatTime = (time) => {
  if (!time) return '无'
  return new Date(time).toLocaleString('zh-CN')
}

onMounted(() => {
  // 检查用户登录状态
  const token = localStorage.getItem('token')
  const userInfo = localStorage.getItem('userInfo')
  
  console.log('当前token:', token ? '已设置' : '未设置')
  console.log('当前用户信息:', userInfo ? JSON.parse(userInfo) : '未设置')
  
  if (!token) {
    ElMessage.error('请先登录')
    // 可以重定向到登录页
    return
  }
  
  fetchUsers()
})
</script>

<style scoped>
.user-management {
  padding: 20px;
  min-height: 100vh;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
}

/* 页面头部样式 */
.page-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 24px;
  padding: 24px;
  background: white;
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
}

.header-left .title-group {
  display: flex;
  flex-direction: column;
}

.page-title {
  display: flex;
  align-items: center;
  font-size: 28px;
  font-weight: 600;
  color: #2c3e50;
  margin: 0 0 8px 0;
}

.title-icon {
  margin-right: 12px;
  font-size: 32px;
  color: #409eff;
}

.page-description {
  color: #7c8db5;
  font-size: 14px;
  margin: 0;
}

.header-right {
  display: flex;
  align-items: center;
}

.stats-container {
  display: flex;
  gap: 20px;
}

.stat-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  background: white;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  min-width: 120px;
}

.stat-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

.stat-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: white;
}

.stat-icon.total-users {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.stat-icon.admin-users {
  background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%);
  color: #e67e22;
}

.stat-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.stat-value {
  font-size: 24px;
  font-weight: 700;
  color: #2c3e50;
  line-height: 1;
  margin-bottom: 4px;
  animation: countUp 0.8s ease-out;
}

@keyframes countUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.stat-label {
  font-size: 13px;
  color: #7c8db5;
  font-weight: 500;
}

/* 搜索卡片样式 */
.search-card {
  margin-bottom: 20px;
  border-radius: 12px;
  border: none;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
}

.search-input {
  border-radius: 8px;
}

.filter-select {
  width: 100%;
}

.action-buttons {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
}

/* 表格卡片样式 */
.table-card {
  border-radius: 12px;
  border: none;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.card-title {
  font-size: 18px;
  font-weight: 600;
  color: #2c3e50;
}

/* 用户表格样式 */
.user-table {
  border-radius: 8px;
  overflow: hidden;
}

.user-info {
  display: flex;
  align-items: center;
  gap: 12px;
}

.user-avatar {
  border-radius: 50%;
  border: 2px solid #e4e7ed;
}

.user-details .username {
  font-weight: 600;
  color: #2c3e50;
  margin-bottom: 4px;
}

.user-details .user-id {
  font-size: 12px;
  color: #909399;
}

.email-cell, .phone-cell, .time-cell {
  display: flex;
  align-items: center;
  gap: 8px;
}

.email-icon, .phone-icon, .time-icon {
  color: #909399;
  font-size: 14px;
}

.action-buttons-cell {
  display: flex;
  gap: 4px;
}

/* 批量操作样式 */
.batch-actions {
  margin-top: 16px;
}

.batch-card {
  background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
  border: 1px solid #2196f3;
  border-radius: 8px;
}

.batch-info {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #1976d2;
  font-weight: 500;
}

.batch-icon {
  color: #2196f3;
}

.batch-buttons {
  display: flex;
  justify-content: flex-end;
}

/* 分页样式 */
.pagination-wrapper {
  display: flex;
  justify-content: center;
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid #ebeef5;
}

/* 对话框样式 */
.user-detail-dialog {
  border-radius: 12px;
}

.user-detail-content {
  padding: 8px;
}

.user-header {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 20px;
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  border-radius: 8px;
  margin-bottom: 20px;
}

.user-avatar-large {
  border: 3px solid #e4e7ed;
}

.user-main-info .user-name {
  margin: 0 0 12px 0;
  font-size: 20px;
  font-weight: 600;
  color: #2c3e50;
}

.user-tags {
  display: flex;
  gap: 8px;
}

.desc-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 500;
}

.user-id-text {
  font-family: 'Courier New', monospace;
  font-size: 12px;
  background: #f5f5f5;
  padding: 2px 6px;
  border-radius: 4px;
}

.user-form-dialog .user-form {
  padding: 0 8px;
}

.dialog-footer {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
}

/* 动画效果 */
.el-fade-in-enter-active,
.el-fade-in-leave-active {
  transition: opacity 0.3s ease;
}

.el-fade-in-enter-from,
.el-fade-in-leave-to {
  opacity: 0;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .page-header {
    flex-direction: column;
    gap: 16px;
  }
  
  .stats-container {
    width: 100%;
    justify-content: space-around;
    flex-wrap: wrap;
    gap: 12px;
  }
  
  .stat-item {
    min-width: 100px;
    padding: 12px 16px;
  }
  
  .stat-icon {
    width: 40px;
    height: 40px;
    font-size: 18px;
  }
  
  .stat-value {
    font-size: 20px;
  }
  
  .stat-label {
    font-size: 12px;
  }
  
  .action-buttons {
    flex-direction: column;
    gap: 8px;
  }
  
  .batch-card .el-row {
    flex-direction: column;
    gap: 12px;
  }
  
  .batch-buttons {
    justify-content: center;
  }
}





/* 深色模式支持 */
@media (prefers-color-scheme: dark) {
  .user-management {
    background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);
  }
  
  .page-header,
  .search-card,
  .table-card {
    background: #34495e;
    color: #ecf0f1;
  }
  
  .page-title,
  .card-title {
    color: #ecf0f1;
  }
  
  .user-details .username {
    color: #ecf0f1;
  }
}
</style>
